<template>
  <div class="dashboard-container">
    <!-- 顶部标题栏 -->
    <header class="dashboard-header">
      <h1>企业运营数据中心</h1>
      <div class="header-info">
        <span>实时更新: {{ updateTime }}</span>
        <button @click="refreshData">刷新数据</button>
      </div>
    </header>

    <div class="dashboard-content">
      <!-- 左侧指标栏 -->
      <aside class="sidebar-left">
        <div class="kpi-card">
          <h3>总销售额</h3>
          <p class="kpi-value">¥{{ totalSales.toLocaleString() }}</p>
          <p class="kpi-change" :class="{ up: salesTrend > 0, down: salesTrend < 0 }">
            {{ salesTrend > 0 ? '↑' : '↓' }} {{ Math.abs(salesTrend) }}%
          </p>
        </div>

        <div class="kpi-card">
          <h3>订单数量</h3>
          <p class="kpi-value">{{ totalOrders.toLocaleString() }}</p>
          <p class="kpi-change" :class="{ up: orderTrend > 0, down: orderTrend < 0 }">
            {{ orderTrend > 0 ? '↑' : '↓' }} {{ Math.abs(orderTrend) }}%
          </p>
        </div>

        <div class="kpi-card">
          <h3>活跃用户</h3>
          <p class="kpi-value">{{ activeUsers.toLocaleString() }}</p>
          <p class="kpi-change" :class="{ up: userTrend > 0, down: userTrend < 0 }">
            {{ userTrend > 0 ? '↑' : '↓' }} {{ Math.abs(userTrend) }}%
          </p>
        </div>

        <div class="chart-container small-chart">
          <h3>销售趋势</h3>
          <div ref="salesTrendChart" class="chart-wrapper"></div>
        </div>
      </aside>

      <!-- 中央主图表区 -->
      <main class="main-content">
        <div class="main-chart-container">
          <h3>全国销售分布</h3>
          <div ref="chinaMap" class="china-map"></div>
        </div>

        <div class="secondary-charts">
          <div class="chart-container">
            <h3>产品类别销售占比</h3>
            <div ref="productPieChart" class="chart-wrapper"></div>
          </div>
          <div class="chart-container">
            <h3>月度销售趋势</h3>
            <div ref="monthlyChart" class="chart-wrapper"></div>
          </div>
        </div>
      </main>

      <!-- 右侧信息栏 -->
      <aside class="sidebar-right">
        <div class="chart-container small-chart">
          <h3>区域销售排名</h3>
          <div ref="regionRankingChart" class="chart-wrapper"></div>
        </div>

        <div class="data-table">
          <h3>最新订单</h3>
          <table>
            <thead>
              <tr>
                <th>订单号</th>
                <th>客户</th>
                <th>金额</th>
                <th>状态</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="order in recentOrders" :key="order.id">
                <td>{{ order.id }}</td>
                <td>{{ order.customer }}</td>
                <td>¥{{ order.amount }}</td>
                <td :class="`status ${order.status}`">{{ order.statusText }}</td>
              </tr>
            </tbody>
          </table>
        </div>

        <div class="alert-panel">
          <h3>异常警报</h3>
          <div v-for="alert in alerts" :key="alert.id" class="alert-item">
            <span class="alert-icon">!</span>
            <div>
              <p class="alert-title">{{ alert.title }}</p>
              <p class="alert-time">{{ alert.time }}</p>
            </div>
          </div>
        </div>
      </aside>
    </div>
  </div>
</template>

<script setup>
  import { ref, onMounted } from 'vue'
  import * as echarts from 'echarts'
  import chinaGeo from '@/assets/map/map.json' // 引入中国地图JSON

  // 数据状态
  const totalSales = ref(87654321)
  const totalOrders = ref(12580)
  const activeUsers = ref(368900)
  const salesTrend = ref(8.2)
  const orderTrend = ref(5.7)
  const userTrend = ref(12.3)
  const updateTime = ref(new Date().toLocaleString())
  const recentOrders = ref([
    {
      id: 'ORD-8765',
      customer: '恒通科技',
      amount: 12500,
      status: 'success',
      statusText: '已完成'
    },
    {
      id: 'ORD-8764',
      customer: '远大集团',
      amount: 89000,
      status: 'processing',
      statusText: '处理中'
    },
    {
      id: 'ORD-8763',
      customer: '星辰电子',
      amount: 56200,
      status: 'pending',
      statusText: '待付款'
    },
    {
      id: 'ORD-8762',
      customer: '宏图伟业',
      amount: 32800,
      status: 'success',
      statusText: '已完成'
    },
    {
      id: 'ORD-8761',
      customer: '未来数据',
      amount: 156000,
      status: 'processing',
      statusText: '处理中'
    }
  ])

  const alerts = ref([
    { id: 1, title: '华东地区销售额异常下降', time: '10:23' },
    { id: 2, title: '服务器负载过高', time: '09:45' },
    { id: 3, title: '支付系统响应延迟', time: '08:17' }
  ])

  // 图表实例
  const salesTrendChart = ref(null)
  const chinaMap = ref(null)
  const productPieChart = ref(null)
  const monthlyChart = ref(null)
  const regionRankingChart = ref(null)

  // 初始化图表
  onMounted(() => {

    echarts.registerMap('china', chinaGeo)
    initSalesTrendChart()
    initChinaMap()
    initProductPieChart()
    initMonthlyChart()
    initRegionRankingChart()
  })

  // 初始化销售趋势图
  const initSalesTrendChart = () => {
    const chart = echarts.init(salesTrendChart.value)
    chart.setOption({
      grid: { top: 10, right: 10, bottom: 20, left: 30 },
      xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月'],
        axisLine: { lineStyle: { color: '#4c5464' } }
      },
      yAxis: { type: 'value', axisLine: { lineStyle: { color: '#4c5464' } } },
      series: [
        {
          data: [12000, 19000, 15000, 24000, 28000, 32000],
          type: 'line',
          smooth: true,
          lineStyle: { color: '#36cbcb' },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(54, 203, 203, 0.3)' },
              { offset: 1, color: 'rgba(54, 203, 203, 0)' }
            ])
          }
        }
      ]
    })
  }

  // 初始化中国地图
  const initChinaMap = () => {
    const chart = echarts.init(chinaMap.value)
    chart.setOption({
      tooltip: { formatter: '{b}: {c}万元' },
      visualMap: {
        type: 'piecewise',
        pieces: [
          { value: 1000, label: '>1000万', color: '#5470c6' },
          { min: 500, max: 1000, label: '500-1000万', color: '#91cc75' },
          { min: 200, max: 500, label: '200-500万', color: '#fac858' },
          { min: 100, max: 200, label: '100-200万', color: '#ee6666' },
          { max: 100, label: '<100万', color: '#73c0de' }
        ],
        textStyle: { color: '#fff' }
      },
      series: [
        {
          name: '销售额',
          type: 'map',
          map: 'china',
          roam: false,
          label: { show: true, color: '#fff', fontSize: 12 },
          data: [
            { name: '北京', value: 1250 },
            { name: '上海', value: 1820 },
            { name: '广东', value: 2100 },
            { name: '江苏', value: 1580 },
            { name: '浙江', value: 1350 },
            { name: '山东', value: 860 },
            { name: '四川', value: 650 },
            { name: '湖北', value: 580 },
            { name: '河南', value: 420 },
            { name: '河北', value: 380 }
          ]
        }
      ]
    })
  }

  // 初始化产品销售占比饼图
  const initProductPieChart = () => {
    const chart = echarts.init(productPieChart.value)
    chart.setOption({
      tooltip: { trigger: 'item' },
      legend: { top: '5%', left: 'center', textStyle: { color: '#fff' } },
      series: [
        {
          name: '产品类别',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: { borderRadius: 10, borderColor: '#1e293b', borderWidth: 2 },
          label: { show: false, position: 'center' },
          emphasis: { label: { show: true, fontSize: 16, fontWeight: 'bold', color: '#fff' } },
          labelLine: { show: false },
          data: [
            { value: 35, name: '电子产品' },
            { value: 25, name: '家居用品' },
            { value: 20, name: '服装鞋帽' },
            { value: 15, name: '食品饮料' },
            { value: 5, name: '其他' }
          ],
          color: ['#36cbcb', '#5470c6', '#ee6666', '#fac858', '#73c0de']
        }
      ]
    })
  }

  // 初始化月度趋势图
  const initMonthlyChart = () => {
    const chart = echarts.init(monthlyChart.value)
    chart.setOption({
      grid: { top: 20, right: 30, bottom: 30, left: 40 },
      xAxis: {
        type: 'category',
        data: [
          '1月',
          '2月',
          '3月',
          '4月',
          '5月',
          '6月',
          '7月',
          '8月',
          '9月',
          '10月',
          '11月',
          '12月'
        ],
        axisLine: { lineStyle: { color: '#4c5464' } }
      },
      yAxis: { type: 'value', axisLine: { lineStyle: { color: '#4c5464' } } },
      series: [
        {
          data: [1200, 1900, 1500, 2400, 2800, 3200, 3600, 3400, 3800, 4200, 4500, 5100],
          type: 'bar',
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#5470c6' },
              { offset: 1, color: '#36cbcb' }
            ])
          }
        }
      ]
    })
  }

  // 初始化区域排名图表
  const initRegionRankingChart = () => {
    const chart = echarts.init(regionRankingChart.value)
    chart.setOption({
      grid: { top: 10, right: 10, bottom: 30, left: 60 },
      xAxis: { type: 'value', axisLine: { lineStyle: { color: '#4c5464' } } },
      yAxis: {
        type: 'category',
        data: ['广东省', '上海市', '北京市', '江苏省', '浙江省', '山东省', '四川省'],
        axisLine: { lineStyle: { color: '#4c5464' } },
        inverse: true
      },
      series: [
        {
          data: [2100, 1820, 1250, 1580, 1350, 860, 650],
          type: 'bar',
          itemStyle: { color: '#ee6666' },
          label: { show: true, position: 'right', color: '#fff' }
        }
      ]
    })
  }

  // 刷新数据方法
  const refreshData = () => {
    // 模拟数据刷新
    updateTime.value = new Date().toLocaleString()
    // 这里可以添加实际的数据刷新逻辑
    totalSales.value = Math.floor(totalSales.value * (1 + (Math.random() * 0.02 - 0.01)))
    totalOrders.value = Math.floor(totalOrders.value * (1 + (Math.random() * 0.02 - 0.01)))

    // 重新绘制图表
    initSalesTrendChart()
    initChinaMap()
    initProductPieChart()
    initMonthlyChart()
    initRegionRankingChart()
  }

  // 窗口大小变化时重绘图表
  window.addEventListener('resize', () => {
    echarts.getInstanceByDom(salesTrendChart.value)?.resize()
    echarts.getInstanceByDom(chinaMap.value)?.resize()
    echarts.getInstanceByDom(productPieChart.value)?.resize()
    echarts.getInstanceByDom(monthlyChart.value)?.resize()
    echarts.getInstanceByDom(regionRankingChart.value)?.resize()
  })
</script>

<style scoped>
  .dashboard-container {
    width: 100%;
    height: 100%;
    background-color: #0f172a;
    color: #fff;
    overflow: hidden;
  }

  .dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background-color: #1e293b;
    border-bottom: 1px solid #334155;
  }

  .header-info {
    display: flex;
    gap: 1.5rem;
    align-items: center;
  }

  button {
    background-color: #36cbcb;
    color: #0f172a;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
  }

  .dashboard-content {
    display: flex;
    height: calc(100% - 80px);
    padding: 1rem;
    gap: 1rem;
  }

  .sidebar-left,
  .sidebar-right {
    width: 22%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .kpi-card {
    background-color: #1e293b;
    border-radius: 8px;
    padding: 1rem;
    border-left: 4px solid #36cbcb;
  }

  .kpi-value {
    font-size: 1.8rem;
    font-weight: bold;
    margin: 0.5rem 0;
    color: #36cbcb;
  }

  .kpi-change {
    font-size: 0.9rem;
    margin: 0;
  }

  .up {
    color: #91cc75;
  }
  .down {
    color: #ee6666;
  }

  .chart-container {
    background-color: #1e293b;
    border-radius: 8px;
    padding: 1rem;
    flex: 1;
    min-height: 200px;
  }

  .small-chart {
    min-height: 180px;
  }

  .chart-wrapper {
    width: 100%;
    height: calc(100% - 30px);
  }

  .main-chart-container {
    flex: 1;
    background-color: #1e293b;
    border-radius: 8px;
    padding: 1rem;
  }

  .china-map {
    width: 100%;
    height: calc(100% - 30px);
  }

  .secondary-charts {
    display: flex;
    gap: 1rem;
    height: 35%;
  }

  .data-table {
    background-color: #1e293b;
    border-radius: 8px;
    padding: 1rem;
    flex: 1;
  }

  table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
  }

  th,
  td {
    text-align: left;
    padding: 0.5rem 0.3rem;
    border-bottom: 1px solid #334155;
  }

  .status {
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
  }

  .success {
    background-color: rgba(145, 204, 117, 0.2);
    color: #91cc75;
  }
  .processing {
    background-color: rgba(250, 200, 88, 0.2);
    color: #fac858;
  }
  .pending {
    background-color: rgba(115, 192, 222, 0.2);
    color: #73c0de;
  }

  .alert-panel {
    background-color: #1e293b;
    border-radius: 8px;
    padding: 1rem;
  }

  .alert-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 0;
    border-bottom: 1px solid #334155;
  }

  .alert-icon {
    background-color: #ee6666;
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
  }

  .alert-title {
    margin: 0;
    font-weight: 500;
  }

  .alert-time {
    margin: 0;
    font-size: 0.8rem;
    color: #94a3b8;
  }
</style>
